<template>
  <div class="article_page">
    <navigate>心理文章</navigate>
    <div class="">
      <div class="tab_bar">
        <div
          v-for="(item, index) in tabBar"
          :key="index"
          class="item_bar"
          :class="{ active_bar: currentBar == index }"
          @click="chooseBar(item.id, index)"
        >
          <div class="item_txt">{{ item.name }}</div>
          <div class="item_line" v-if="currentBar == index"></div>
        </div>
      </div>
      <!-- 推荐 -->
      <div class="recommend_box">
        <div class="recommend_num">该分类下共有文章: {{ articleTotal }}篇</div>
        <div class="recommend_txt">推荐文章</div>
        <div class="recommend_det">
          <img
            :src="joinUrlImg(recommendInfo.img)"
            alt=""
            class="recommend_img"
          />
          <div class="recommend_info">
            <div class="tit">{{ recommendInfo.name }}</div>

            <div class="author">文章作者：{{ recommendInfo.author }}</div>
            <div class="frequency">
              <img src="@/assets/images/function/hot_icon.png" alt="" />
              <div>阅读次数：{{ recommendInfo.read_num }}次</div>
            </div>
            <div class="desc">
              {{ recommendInfo.content }}
            </div>
          </div>
        </div>
      </div>

      <!-- 文章列表 -->
      <div class="article_box">
        <div class="article_head">
          <div class="line"></div>
          <div class="tit">文章列表</div>
        </div>
        <div class="article_list">
          <div
            class="item_article"
            v-for="(item, index) in articleList"
            :key="index"
            @click="toArticleDetails(item.id)"
          >
            <img :src="joinUrlImg(item.img)" alt="" class="article_img" />
            <div class="article_info">
              <div class="article_tit">{{ item.name }}</div>
              <div class="article_author">文章作者：{{ item.author }}</div>
              <div class="article_operation">
                <div class="read_frequency">
                  阅读次数：{{ item.read_num }}次
                </div>
                <div class="collect">
                  <img
                    v-if="item.is_collect == 1"
                    src="@/assets/images/function/collect.png"
                    alt=""
                    @click.stop="collectOperation(item.id, 1)"
                  />
                  <img
                    src="@/assets/images/function/no_collect.png"
                    alt=""
                    v-else
                    @click.stop="collectOperation(item.id, 0)"
                  />
                  <span>{{ item.is_collect == 1 ? "已收藏" : "未收藏" }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { joinUrlImg } from "@/utils/setUrlImg";
import {
  queryArticleType,
  queryArticleList,
  toCollect,
  toCancelCollect,
  queryRecommend,
} from "@/api/funcation/mentalArticle";
export default {
  data() {
    return {
      recommendInfo: {},
      articleTotal: null,
      articleList: [],
      currentBar: this.$route.query.currentBar || 0,
      tabBar: [],
      pageSize: 10,
      page: 1,
      articleName: "",
    };
  },
  created() {
    this.getArticleType();
    this.getRecommendArticle();
  },
  methods: {
    joinUrlImg,
    //推荐文章
    async getRecommendArticle() {
      let res = await queryRecommend();
      this.recommendInfo = res.data;
    },
    //取消、收藏
    async collectOperation(id, val) {
      if (val == 1) {
        await toCancelCollect({ id });
        this.$toast.success({ message: "取消收藏成功！" });
        this.getArticleInfo();
      } else {
        await toCollect({ id });
        this.$toast.success({ message: "收藏成功！" });
        this.getArticleInfo();
      }
    },
    //tab列表
    async getArticleType() {
      let res = await queryArticleType();
      this.tabBar = res.data;
      this.getArticleInfo(this.tabBar[0].id);
    },
    async getArticleInfo(id) {
      let par = {
        pageSize: this.pageSize,
        page: this.page,
        type_id: id,
      };
      let res = await queryArticleList(par);
      this.articleList = res.data.data;
      this.articleTotal = res.data.total;
    },
    chooseBar(id, index) {
      this.currentBar = index;
      this.getArticleInfo(id);
    },
    toArticleDetails(id) {
      this.$router.push(
        `/articleDetails?id=${id}&currentTab=${this.currentBar}`
      );
    },
  },
};
</script>

<style lang="less" scoped>
.article_page {
  background-color: #f4f6fa;
  color: #333333;
}

.tab_bar {
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 14px;
  padding: 0 20px;
  height: 54.33px;
}

.item_bar {
  margin-right: 20px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 10px;
}

.active_bar {
  font-weight: bold;
  color: #00aeff;
}

.item_line {
  position: absolute;
  bottom: -8.33px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 13.33px;
  height: 5.33px;
  background: linear-gradient(
      -10deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #00aeff;
  border-radius: 2.67px;
  opacity: 0;
  transition: opacity 0.3s;
}

.active_bar .item_line {
  opacity: 1;
}

.item_bar:last-child {
  margin-right: 0;
}

//推荐
.recommend_box {
  background: #ffffff;
  border-radius: 6.67px;
  padding: 16.67px 14px22.67px 10px;
  margin: 0 10px;
}
.recommend_num {
  opacity: 0.5;
  font-size: 12px;

  line-height: 12px;
}
.recommend_txt {
  font-size: 18.67px;
  line-height: 67px;
}
.recommend_det {
  display: flex;
  align-items: center;
}
.recommend_img {
  width: 100px;
  height: 143px;
  margin-right: 16.67px;
}
.recommend_info {
  flex: 1;
}
.tit {
  font-size: 18px;
  line-height: 26.67px;
}
.author {
  margin-top: 16.33px;
}
.author,
.frequency {
  font-size: 12px;

  line-height: 12px;
}
.frequency {
  display: flex;
  align-items: center;
  color: #ff9500;
  margin: 9.67px 0;
}
.frequency img {
  width: 8.33px;
  height: 10.67px;
  margin-right: 7.15px;
}
.desc {
  font-size: 12px;
  line-height: 16.33px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-wrap: break-word;
  word-break: break-all;
}
.article_box {
  margin: 0 10px;
}
.article_head {
  display: flex;
  align-items: center;
  margin: 15.67px 0;
}

.article_head .line {
  width: 5.33px;
  height: 15.33px;
  background: linear-gradient(
      -10deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #2aa1ec;
  border-radius: 2.67px;
}

.article_head .tit {
  font-size: 15.33px;
  font-weight: bold;
  margin-left: 10px;
}

//列表
.article_list {
}
.item_article {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 6.67px;
  padding: 10px;
  margin-bottom: 6.67px;
}
.article_img {
  width: 56px;
  height: 80px;
  border-radius: 6px;
  margin-right: 10px;
}
.article_info {
  flex: 1;
}
.article_tit {
  font-size: 15.33px;
  line-height: 15.33px;
}
.article_author {
  margin: 18px 0 10px;
}
.article_author,
.read_frequency,
.collect {
  font-size: 12px;
  line-height: 12px;
}
.article_operation {
  display: flex;
  justify-content: space-between;
}
.read_frequency,
.collect span {
  color: #aaaaaa;
}
.collect {
}
.collect img {
  width: 12px;
  height: 12px;
  margin-right: 6.33px;
}
.collect span {
}
</style>
